<!-- 页面设置 -->
<template>
    <div class='bgff h100 pd pt10 dfgfdgtrt'>
        <p class="title-label">首页设置</p>
        <div class="mt20 sdfgdgdfyt">
            <n-form ref="formRef" label-width="120" :inline="false" size="normal" label-placement="left">
                <n-form-item label="背景视频:" path="">
                    <div class="logo-context vertical-center " @click="photoShowModal = true">

                        <video id="top_kv_pc" preload="" autoplay playsinline muted loop controlslist="nodownload"
                            :src="formValue.video" class="w100 h100 imgjz" v-if="formValue.video"></video>
                        <span v-else>点击上传背景视频</span>
                    </div>
                </n-form-item>

                <n-form-item label="视频上的图片:" path="" class="mt20">
                    <div class="logo-context vertical-center ab" @click="photoShowModaler = true">
                        <img :src="formValue.videoImg" class="w100 h100 imgjz" v-if="formValue.videoImg" />
                        <span v-else>点击上传LOGO</span>
                    </div>
                </n-form-item>
            </n-form>
        </div>
        <div class="mt20">
            <n-button type="primary" size="medium" @click="saveFun">保存</n-button>
            
        </div>
        <n-modal v-model:show="photoShowModal" preset="card" class="Stock-diagnosis">
            <template #header>
                <div>背景视频</div>
            </template>
            <div>
                <photoGallery @getImg="getImg" types="背景视频" accept=".mp4"></photoGallery>
            </div>
            <template #action>
                <div class="tr">
                    <n-button @click="photoShowModal = false"> 取消 </n-button>
                    <n-button class="ml10" type="info" @click="setImg"> 确定 </n-button>
                </div>
            </template>
        </n-modal>


        <n-modal v-model:show="photoShowModaler" preset="card" class="Stock-diagnosis">
            <template #header>
                <div>视频上的图片</div>
            </template>
            <div>
                <photoGallery @getImg="getImger" types="视频上的图片"></photoGallery>
            </div>
            <template #action>
                <div class="tr">
                    <n-button @click="photoShowModaler = false"> 取消 </n-button>
                    <n-button class="ml10" type="info" @click="setImger"> 确定 </n-button>
                </div>
            </template>
        </n-modal>


    </div>
</template>
<script lang='ts' setup>
import { ref } from "vue"
import photoGallery from "../../../components/util/photoGallery";
import { callBack, dxpost, qurl, dxget } from "../../../util/index"
const photoShowModal = ref(false)
const photoShowModaler = ref(false)
const id = 5
const formValue = ref({
    video: "",
    videoImg: ""
})



let jjnmnxe = "";
const getImg = (data) => {
    jjnmnxe = data;
};
const setImg = () => {
    formValue.value.video = jjnmnxe;
    photoShowModal.value = false;
};


let jjnmnxeer = "";
const getImger = (data) => {
    jjnmnxeer = data;
};
const setImger = () => {
    formValue.value.videoImg = jjnmnxeer;
    photoShowModaler.value = false;
};

const initData = async()=>{
    const {data}:any =  await dxget('cyyx/cyyxconfig',{id})
    
     
    const dataw = JSON.parse(data.data)
    if(dataw.video){
        formValue.value.video = dataw.video
    }
    if(dataw.videoImg){
        formValue.value.videoImg = dataw.videoImg
    }
    
}
initData()
const saveFun = async()=>{
  const {errno}:any =  await dxpost('cyyx/cyyxconfig',{id,data:JSON.stringify(formValue.value)},'put')
  if(errno==0){
    window.$message.success('保存成功！')
  }
}
</script>
<style scoped>
.dfgfdgtrt {
    overflow: auto;
    padding-bottom: 40px;
}

.sdfgdgdfyt {
    width: 1200px;
}

.logo-context {
    border: 1px dashed #999;
    width: 600px;
    height: 300px;
    text-align: center;
    color: #999;
    cursor: pointer;
    background: #e0e0e0;
}

.logo-context.ab {
    width: 300px;
    height: 100px;
}

.logo-context.ac {
    width: 600px;
    height: 300px;
}
</style>